<template>
  <div>
    <!-- 
      状态是组件自身的数据, 属性是来自父组件的数据，
      状态和属性的改变都未必会触发更新
    -->
    <p>
      <button @click="handleNameChange">change this.name</button>
      <button @click="handleInfoChange">change this.info</button>
      <button @click="handleListChange">chaneg this.list</button>
    </p>
    <props-and-data :name="name" :info="info" :list="list" />
  </div>
</template>

<script>
import PropsAndData from "./PropsAndData.vue";

let name = "Alomy";

export default {
  components: { PropsAndData },
  data() {
    this.name = name; // name 并没有做响应式
    return {
      // name: name,  // 响应式
      info: {}, // info 是响应式，但 info下面再进一步的字段不是 如：info.number
      /* info: {
        number: undefined  // info.number 为响应式
      }, */
      list: [],
    };
  },
  methods: {
    handleNameChange() {
      this.name = "World" + Date.now();
      console.log("this.name 发生了改变，但是并没有触发子组件更新", this.name);
    },
    handleInfoChange() {
      this.info.number = 1;
      console.log("this.info 发生了改变，但是并没有触发子组件更新", this.info);
    },
    handleListChange() {
      this.list.push(1, 2, 3);
      console.log("this.list 并发生了改变，但是触发了子组件更新", this.list);
    },
  },
};
</script>
